<template>
  <div>
    <div>
      <e-charts class="chart" :option="option" />
    </div>

    {"msg":"获取办结统计数据成功",
    "timestamp":1660293062093,
    "data":{"todoToday":1054,
    "doneToday":84.32,
    "doneRateToday":"8.00",
    "todoTotal":175927,
    "doneTotal":0,
    "doneRateTotal":"0.00",
    "history":
    [{"month":"1","total":1606},
    {"month":"2","total":3881},
    {"month":"3","total":1838},
    {"month":"4","total":4502},
    {"month":"5","total":7591},
    {"month":"6","total":6057},
    {"month":"7","total":1095}]}

  </div>
</template>

<script>

export default {
  name: 'HomePage',
  data() {
    return {
      data: this.getRandomDate()
    }
  },
  computed: {
    option() {
      return {
        xAxis: {
          type: 'category',
          data: this.data.map(d => d.time)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.data.map(d => d.value),
            type: 'line'
          }
        ]
      }
    }
  },
  methods: {
    getRandomDate() {
      return [
        {
          time: '2022-8-12',
          value: Math.random() * 100
        },
        {
          time: '2022-8-12',
          value: Math.random() * 100
        },
        {
          time: '2022-8-12',
          value: Math.random() * 100
        },
        {
          time: '2022-8-12',
          value: Math.random() * 100
        }
      ]
    }
  },
  created() {
    setInterval(() => {
      this.data = this.getRandomDate()
    }, 1000)
  }
}
</script>

<style lang="css" scoped>
.chart {
  width: 100%;
  height: 100vh;
}
</style>
